<template>
   <div>
       <div class="personal_role">
           <div class="personal_role_name">
               成员角色管理：
           </div>
           <div class="personal_role_content">
               <div class="personal_role_box">
                   <div class="personal_role_item">
                       <div class="personal_role_item1">角色</div>
                       <div class="personal_role_item2">权限</div>
                       <div class="personal_role_icon">
                           <div class="manage_search_box">
                               <div class="manage_operation" @click="openChange" v-if="fairst||change"></div>
                               <div class="manage_operation" @click="addRole(perm,0)" v-if="fairst||!change"></div>
                           </div>
                       </div>
                   </div>
                   <div class="personal_role_one" v-for="(val,index) in Tlist">
                       <div v-if="val.role">
                           <div class="personal_role_item1"><input type="text" disabled="disabled" v-model="val.name" class="personal_role_input"></div>
                           <div class="personal_role_item2" @mouseover="openCheck(val,index)" @mouseout="closeCheck(val,index)">
                               <div class="personal_role_check" v-if="val.check">{{val.content}}</div>
                               <div class="manage_item_text" :class="{manage_item_hover:!change}">{{val.content}}</div>
                           </div>
                           <div class="personal_role_item4" @click="addRole(val,index)" title="复制权限">&#xe692;</div>
                           <div class="personal_role_item3" v-show="false">&#xe84b;</div>
                       </div>
                       <div v-else>
                           <div class="personal_role_item1" :class="{manage_item_change:change}"><input type="text" :disabled="!change&&val.role" v-model="val.name" class="personal_role_input"></div>
                           <div class="personal_role_item2" :class="{manage_item_change:change,manage_item_icon:change}" @click.stop="changeW(val,index)" @mouseover="openCheck(val,index)" @mouseout="closeCheck(val,index)">
                               <div class="personal_role_check" v-if="val.check">{{val.content}}</div>
                               <div class="manage_item_text" :class="{manage_item_hover:!change}">{{val.content}}</div>
                               <multiSelect v-if="val.show&&change" v-on:crContent="crContent" :data="val.permissions" @click.stop></multiSelect>
                           </div>
                           <div class="personal_role_item4" @click="addRole(val,index)" title="复制权限">&#xe692;</div>
                           <div class="personal_role_item3" @click="removeItem(val)" title="删除此角色">&#xe84b;</div>
                       </div>
                   </div>
               </div>
               <div class="personal_role_one" v-if="addList.show">
                    <div>
                        <div class="personal_role_item1 manage_item_change">
                            <input type="text" class="personal_role_input" v-model="addList.name">
                        </div>
                        <div class="personal_role_item2 manage_item_icon manage_item_change">
                            <div class="manage_item_text">{{addList.content}}</div>
                            <multiSelect v-on:crContent="crContent" :data="addList.permissions"></multiSelect>
                        </div>
                        <div class="personal_role_item3"></div>
                    </div>
               </div>
               <div v-if="addList.show||change" :class="{personal_role_ok:addList.show}">
                   <div class='manage_item_waring'><span v-if="tip.show" class="manage_item_height"><span class='manage_item_waringIcon'>&#xe64a;&nbsp;</span>{{tip.text}}</span></div>
                   <div class='personal-information-determine information-qe nice-btn-lBlue' @click="rol_submit">确定</div>
                   <div class='personal-information-cancel information-of cancel-btn-ordinary' @click="removeChange">取消</div>
               </div>
           </div>
       </div>
   </div>
</template>
<script>
    import * as vx from 'vuex'
    import multiSelect from './../../../component/multiSelect.vue'
    export default{
        data(){
            return{
                perm:{permissions:[]},
                tip:{
                    show:false,
                    text:'手机号码格式有误或者手机号码已经存在，请重新输入'
                },
                fairst:true,
                change:false,
                opp:true,
                changeId:'',
                Olist:[

                ],
                Tlist:'',
                addList:{
                    id:99999,
                    show:false,
                    name:'',
                    role:false,
                    permissions:'',
                    content:''
                },
            }
        },
        computed:{
            ...vx.mapGetters([
                'permissions',
                'c_updated'
            ])
        },
        mounted:function () {
            this.roleList();
        },
        watch:{
            c_updated:function () {
                this.Tlist.forEach((val)=>{
                    val.show=false;
                })
            }
        },
        methods:{
            addRole:function (val,index) {
                this.addList= {
                    id: 99999,
                    show: false,
                    name: '',
                    role: false,
                    permissions: val.permissions,
                    content: val.content
                };
                this.add();
            },
            roleList:function(){
                $.ajax({
                    url:'/rolenew_getList',
                    dataType:'json',
                    success:(val)=>{
                        val.list.forEach((das)=>{
                            let arr=[];
                            let content='';
                            das.menus.forEach((mes)=>{
                                arr.push({
                                    name:mes.name,
                                    id:mes.id,
                                    set:(mes.type==1? true: false)
                                });
                                if(mes.type==1&&mes.id!=7&&mes.id!=9&&mes.id!=10&&mes.id!=11){
                                    content+=mes.name+'，'
                                }
                            });
                            content = content.substring(0,content.length - 1);
                            this.Olist.push({
                                id:das.id,
                                show:false,
                                name:das.name,
                                role:(das.id==2? true:false),
                                permissions:arr,
                                content:content,
                                check:false
                            });
                        });
                        let arr=[];
                        for(let i=0;i<this.permissions.length;i++){
                            if(this.permissions[i].id!=16){
                                arr.push({
                                    name:this.permissions[i].name,
                                    id:this.permissions[i].id,
                                    set:this.permissions[i].type==1?true:false
                                })
                            }
                        }
                        this.addList.permissions=arr;
                        this.perm.permissions=this.addList.permissions;
                        this.Tlist=JSON.parse(JSON.stringify(this.Olist));
                    }
                });
            },
            openCheck:function (val,index) {
                if(!this.change){
                    if(val.content!=""){
                        this.$set(this.Tlist[index],"check",true)
                    }
                }
            },
            closeCheck:function (val,index) {
                this.Tlist[index].check=false;
            },
            changeW:function (val,index) {
                for(let i=0;i<this.Tlist.length;i++){
                    if(i!=index){
                        this.Tlist[i].show=false;
                    }
                }
                this.Tlist[index].show=!this.Tlist[index].show;
                this.changeId=val.id;
            },
            crContent:function (val) {
                if(this.addList.show){
                    let texts='';
                    for(let i=0;i<val.length;i++){
                        if(val[i].set&&val[i].id!=7&&val[i].id!=9&&val[i].id!=10&&val[i].id!=11){
                            texts+=val[i].name+'，'
                        }
                    }
                    texts = texts.substring(0,texts.length - 1);
                    this.addList.permissions=JSON.parse(JSON.stringify(val));
                    this.addList.content=texts;
                }else{
                   for(let i=0;i<this.Tlist.length;i++){
                       if(this.Tlist[i].id==this.changeId){
                           this.Tlist[i].permissions=JSON.parse(JSON.stringify(val));
                           let texts='';
                           for(let i=0;i<val.length;i++){
                               if(val[i].set&&val[i].id!=7&&val[i].id!=9&&val[i].id!=10&&val[i].id!=11){
                                   texts+=val[i].name+','
                               }
                           };
                           texts = texts.substring(0,texts.length - 1);
                           this.Tlist[i].content=texts;
                       }
                   }
                }
            },
            rol_submit:function () {
                if(this.addList.show){
                    // 添加 功能
                    var state=3;
                    let tn=true;
                    for(let i =0;i<this.Tlist.length;i++){
                        if(this.Tlist[i].name==this.addList.name){
                            tn=false;
                        }
                    }
                    if(!tn){
                        this.tip.text='用户角色名字不能重复';
                        this.tip.show=true;
                        setTimeout(()=>{this.tip.show=false;},1500);
                        return false;
                    }
                    if(this.addList.name!=''){
                        for(let j=0;j<this.addList.permissions.length;j++){
                            if(this.addList.permissions[j].set){
                                state=1;
                                break;
                            }
                        }
                       if(state==1){
                           let menused=[];
                           this.addList.permissions.forEach((dataNaw)=>{
                               menused.push({
                                   name:dataNaw.name,
                                   id:dataNaw.id,
                                   type:(dataNaw.set==true? 1: 0)
                               })
                           });
                           $.ajax({
                               url:'/rolenew_add',
                               type:'post',
                               dataType:"json",
                               data:{
                                   sn:this.addList.name,
                                   name:this.addList.name,
                                   menus:JSON.stringify(menused)
                               },
                               success:(mus)=>{
                                   if(mus.opResult==0){
                                       this.$emit("change_role");
                                       this.addList.show=false;
                                       this.addList.id=mus.id;
                                       this.Olist.push(JSON.parse(JSON.stringify(this.addList)));
                                       this.Tlist=JSON.parse(JSON.stringify(this.Olist));
                                       this.change=false;
                                       this.fairst=true;
                                       this.addList.name="";

                                   }else {
                                       this.tip.text='添加失败';
                                       this.tip.show=true;
                                       setTimeout(()=>{this.tip.show=false;},1500);
                                   }
                               }
                           })
                           // -- 上传数据
                       }else if(state==3) {
                           this.tip.text='用户角色名字不能重复';
                           this.tip.show=true;
                           setTimeout(()=>{this.tip.show=false;},1500);
                       }
                    }else{
                        this.tip.text='用户角色名字不能为空';
                        this.tip.show=true;
                        setTimeout(()=>{this.tip.show=false;},1500);
                    }
                }else{
                    // 修改 功能
                    let state=0;
                    let ist=1;
                    re:
                    for(let i=0;i<this.Tlist.length;i++){
                        for(let j=0;j<this.Tlist[i].permissions.length;j++){
                            if(this.Tlist[i].permissions[j].set){
                                state=0;
                            }
                        }
                        let len=0;
                        for(let j=0;j<this.Tlist.length;j++){
                            if(this.Tlist[i].name==this.Tlist[j].name){
                                len++;
                                if(this.Tlist[i].name==''){
                                    state=2;
                                    break re;
                                }else if(len>1){
                                    state=1;
                                    break re;
                                }
                            }
                        }
                    };

                    if(state==1){
                        this.tip.text='用户角色名字不能重复';
                        this.tip.show=true;
                        setTimeout(()=>{this.tip.show=false;},1500);
                    }else if(state==2){
                        this.tip.text='用户角色名字不能为空';
                        this.tip.show=true;
                        setTimeout(()=>{this.tip.show=false;},1500);
                    }else if(state==3){
                        alert("添加的用角色权限至少拥有一个权限！")
                    } else if(state==0){
                        let rolestr=[];
                        for(let i=0;i<this.Tlist.length;i++){
                            if(this.Tlist[i].name!=this.Olist[i].name||this.Olist[i].content!=this.Tlist[i].content){
                                let ares=[];
                                this.Tlist[i].permissions.forEach((mms)=>{
                                    ares.push({
                                        id:mms.id,
                                        name:mms.name,
                                        type:(mms.set?1:0),
                                    });
                                });
                                rolestr.push({
                                    sn: this.Tlist[i].sn,
                                    name:this.Tlist[i].name,
                                    id:this.Tlist[i].id,
                                    menus:ares
                                })
                            }
                        }
                        if(rolestr.length!=0){
                            $.ajax({   //  --上传数据
                                url:'/rolenew_update',
                                type:'post',
                                dataType:'json',
                                data:{
                                    rolestr:JSON.stringify(rolestr)
                                },
                                success:(role)=>{
                                    if(role.opResult==0){
                                        this.Olist=JSON.parse(JSON.stringify(this.Tlist));
                                        this.change=false;
                                        this.fairst=true;
                                    }else {
                                        alert('修改失败')
                                    }
                                }
                            });
                        }else {
                            this.Tlist=JSON.parse(JSON.stringify(this.Olist));
                            this.change=false;
                            this.fairst=true;
                        }

                    }
                }
            },
            removeItem:function (val) {
                for(let i=0;i<this.Tlist.length;i++){
                    if(this.Tlist[i].id==val.id){
                        if(confirm("确定删除吗？")){
                            $.ajax({
                                url:'/rolenew_delete',
                                data:{
                                    id:val.id
                                },
                                success:(data)=>{
                                    if(data.opResult==0){
                                        $('#getEmployees').click();
                                        this.Tlist.splice(i,1);
                                        this.Olist=JSON.parse(JSON.stringify(this.Tlist));
                                        this.$emit("change_role");
                                    }else {
                                        alert('删除角色失败');
                                    }
                                }
                            });
                            break;
                        }
                    }
                }
                // --上传数据
            },
            openChange:function () {
                this.change=true;
                this.fairst=false;
            },
            removeChange:function () {
                this.change=false;
                this.fairst=true;
                this.addList.show=false;
                this.addList.name="";
                this.addList.show=false;
                this.Tlist=JSON.parse(JSON.stringify(this.Olist));
            },
            add:function () {
                this.change=false;
                this.fairst=false;
                this.addList.show=true;
            }
        },
        components:{
            multiSelect:multiSelect
        }
    }
</script>
<style>
    .personal_role_name{
        padding:23px 0px 0px 60px;
        font-size: 12px;
        color: white;
    }
    .personal_role_ok{
        overflow: hidden;
        margin-top:205px;
    }
    .personal_role{
        display:flex;
    }
    .manage_item_text{
        text-overflow :ellipsis;
        white-space : nowrap;
        overflow : hidden;
        padding: 0px 25px 0px 25px;
        display:block;
        width:250px;
    }
    .manage_item_hover:hover{
        cursor: pointer;
        border: 1px solid rgba(126,189,233,0.8);
    }
    .personal_role_one,.personal_role_item2{
        position: relative;
    }
    .personal_role_check{
        position: absolute;
        top: 0px;
        left: -115px;
        width: 150px;
        height: auto;
        background-color: rgba(33,65,114,0.9);
        z-index: 5;
        border-radius: 4px;
        padding: 3px 8px;
    }
</style>